<template>
	<view class="content">
		基本信息
		<view class="main-content">
			<view class="select-header">
				<view class="title">
					调拨类型：
				</view>
				<view class="main-select">
					<uni-data-select v-model="createForm.transType" :localdata="transTypeList" @change="transTypeSelect"
						placeholder="请选择调拨类型"></uni-data-select>
				</view>

			</view>
			<view class="select-header">
				<view class="title">
					调拨仓库：
				</view>
				<view class="main-select">
					<uni-data-select v-model="createForm.transType" :localdata="transTypeList" @change="transTypeSelect"
						placeholder="请选择调拨类型"></uni-data-select>
				</view>

			</view>
			<view class="select-header">
				<view class="title">
					调入仓库：
				</view>
				<view class="main-select">
					<uni-data-select v-model="createForm.transType" :localdata="transTypeList" @change="transTypeSelect"
						placeholder="请选择调拨类型"></uni-data-select>
				</view>

			</view>
			<view class="select-header">
				<view class="title">
					备注：
				</view>
				<view class="main-select">
					<up-input placeholder="请输入备注" border="surround" v-model="createForm.remark"></up-input>
				</view>
			</view>
		</view>
		<view class="fixed-button">
			<up-button type="primary" size="large" text="下一步" @click="nextShow = true"></up-button>
		</view>
	</view>
	<up-popup v-model:show="nextShow" mode="bottom" :round="10" :customStyle="{height: '95vh',padding: '36rpx'}">
		<view class="card">
			<view class="main-header">
				<view class="title">
					商品信息
				</view>
				<view class="addGoods">
					添加商品
				</view>
			</view>
			<view class="goods-card">
				<view class="goods-title">
					<view style="flex:2">商品名</view>
					<view class="title-item">数量</view>
					<view class="title-item">单位</view>
					<view class="title-item">金额</view>
				</view>
				<view class="line"></view>
				<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
					<span>{{ item.name }}</span>
					<span>{{ item.num }}</span>
					<span>{{ item.unit }}</span>
					<span>{{ item.amount }}</span>
				</view>
				<view class="line"></view>
				<view class="footer">
					<span>商品总数：{{goodsList.length}}</span>
					<span>总计金额：484</span>
				</view>
			</view>
		</view>
		<view class="fixed-button">
			<view style="flex:1">
				<up-button :plain="true" size="large" text="上一步" @click="nextShow = false"></up-button>
			</view>
			<view style="flex: 2;">
				<up-button type="primary" size="large" text="提交" @click="toDetail"></up-button>
			</view>
		</view>
	</up-popup>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { route } from '@/uni_modules/uview-plus'
	const toDetail = () => {
		route({
			url: '/package_saleman/pages/transfer/detail'
		})
	}
	const goodsList = [{
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}, {
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}, {
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}, {
		name: '康师傅方便面',
		num: 4,
		unit: '瓶',
		amount: 121
	}]
	const nextShow = ref(false)
	const createForm = reactive({
		transType: '',
		remark: ''
	})
	const transTypeList = ref([
		{
			value: '1',
			text: '车销提货'
		},
		{
			value: '2',
			text: '车销回库'
		},
		{
			value: '3',
			text: '自提出库'
		},
		{
			value: '4',
			text: '访单回库'
		}
	])

	// 方法  
	const transTypeSelect = (item) => {
		console.log(item);
	};
</script>

<style lang="scss" scoped>
	.content {
		padding: 36rpx;

		.main-content {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
			padding: 12rpx;

			.select-header {
				display: flex;
				align-items: center;

				.title {
					display: flex;
					flex: 1;
				}

				.main-select {
					display: flex;
					flex: 2;
					border-radius: 6rpx;
					background-color: rgba(242, 243, 245, 1);
				}
			}
		}

		.fixed-button {
			position: fixed;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 40rpx);
			padding: 20rpx;
			box-sizing: border-box;
			text-align: center;
		}
	}

	.card {
		display: flex;
		flex-direction: column;
		padding: 12rpx;

		.main-header {
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(1, 11, 31, 1);
			}

			.addGoods {
				color: rgba(15, 127, 255, 1);
			}
		}

		.goods-card {
			width: 100%;
			margin: 20rpx 0;
			padding: 24rpx;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.05);
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
			gap: 30rpx;
			color: rgba(100, 101, 102, 1);
		}

		.goods-title {
			display: flex;
			justify-content: space-between;
			font-weight: bold;
		}

		.title-item {
			flex: 1;
			text-align: center;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background-color: #ccc;
			margin: 10rpx 0;
		}

		.goods-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
		}

		.goods-item span {
			flex: 1;
			text-align: center;
		}

		.footer {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 10rpx;
		}
	}

	.fixed-button {
		position: fixed;
		bottom: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: calc(100% - 40rpx);
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
		display: flex;
		/* 使用 flex 布局 */
		gap: 20rpx;
		/* 设置按钮之间的间距 */
	}
</style>